<template>
  <el-dialog
    title="成绩信息"
    width="800px"
    :visible.sync="dialogFormVisible"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="100px"
      v-loading="confirmLoading"
    >
      <el-form-item label="姓名">
        <span>{{ form.userName }}</span>
      </el-form-item>
      <el-form-item label="身份证号">
        <span>{{ form.idCard }}</span>
      </el-form-item>
      <el-form-item label="考试成绩">
        <el-table
          border
          :header-cell-style="{background:'#f7f7f7',color:'#606266'}"
          v-loading="listLoading"
          :data="examList"
          style="width: 100%"
        >
          <el-table-column label="考试次数" align="center">
            <template slot-scope="{ row }">
              <span>第{{ row.examTimes || 0 }}次考试</span>
            </template>
          </el-table-column>
          <el-table-column label="考试时间" width="280" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.startTime }} 至 {{ row.endTime || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="成绩" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.examScore || 0 }} 分</span>
            </template>
          </el-table-column>
          <el-table-column label="考试情况" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.pass | passFilter }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import formMixin from "@/mixins/form";
import request from "@/utils/request";
export default {
  name: "Dialog",
  mixins: [formMixin],
  filters: {
    passFilter(status) {
      const statusMap = {
        0: "不及格",
        1: "及格",
        null: "正在考"
      };
      return statusMap[status];
    }
  },
  components: {},
  data() {
    const examTypeList = ["A", "B", "C", "C1", "C2", "C3"];
    return {
      examTypeList,
      Urls: {
        addUrl: "",
        editUrl: "",
        getByIdUrl: "/api/examUser/get/",
        getUserExamListUrl: "/api/exam/record/query"
      },
      examList: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      listLoading: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    fillForm(data) {
      this.listLoading = true;
      request({
        url: this.Urls.getUserExamListUrl,
        method: "post",
        data: {
          userId: data.userId,
          examId: data.examId,
          isLeaf: 1
        }
      })
        .then(res => {
          this.listLoading = false;
          if (res.code == 0) {
            this.examList = res.data.records;
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {
          this.listLoading = false;
        });
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="scss" scoped></style>
